<template>
  <div class="search">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img @click="$router.go(-1)" class="tit_fl_img" src="../assets/myImg/back@2x.png" alt />
      </div>
      <span>搜索</span>
    </div>
    <!-- 头部搜索 -->
    <div class="home_head">
      <img class="inp_img" src="../assets/img/search@2x.png" alt />
      <input
        class="head_inp"
        @keyup.enter="onSubmit"
        v-model="seaContent"
        type="text"
        placeholder="搜索你的需要"
      />
      <img @click="$router.push('/my')" :src="userImg" alt class="head_img" />
    </div>

    <!-- 热门搜索 -->
    <!-- <div class="hot_search">
      <h2>热门搜索</h2>
      <span class="isTakaryo">精品课程</span>
      <span class="isTakaryo">带货教程</span>
      <span class="isTakaryo">小白课程</span>
      <span>精品</span>
      <span>精品</span>
      <span>精品</span>
      <span>精品</span>
    </div>-->

    <!-- 下方视频详情 -->
    <ul class="product_deta">
      <li
        class="product_deta_item"
        @click="goVideoDetail(item.chapter_id)"
        v-for="(item,index) in searchLists"
        :key="index"
      >
        <img class="deta_item_img" :src="item.chapter_avatar" alt />
        <div class="deta_item_fr">
          <h2 class="fr_h2">{{item.chapter_name}}</h2>
          <span class="fr_sp" v-html="item.desc">{{item.desc}}</span>
          <div class="fr_con">
            <div class="con_fl"></div>
            <span>{{item.create_time}}</span>
          </div>
        </div>
      </li>
    </ul>

    <!-- 搜索商品详情 -->
    <ul class="comm_list">
      <li class="comm_item" v-for="item in cateGoodsList" :key="item.id">
        <h1 class="comm_tit">{{item.post_title}}</h1>
        <p class="comm_url" v-html="item.post_source">{{item.post_source}}</p>
        <p class="comm_xl">
          <span>月销量: {{item.post_hits}}</span>
          <span>价格: {{item.post_like}}</span>
          <span>佣金:1.55</span>
          <span>比例: {{item.rate}}</span>
        </p>
        <div class="comm_deta">
          <div class="comm_bq">
            <span>{{item.post_keywords}}</span>
          </div>
          <span class="comm_link" @click="goStore(item.post_source)">进入小店</span>
        </div>
        <!-- 复制按钮 -->
        <div class="dup_btn">
          <span>复制</span>
        </div>
      </li>
    </ul>

    <!-- 搜索历史 -->
    <div class="hot_search">
      <h2>历史搜索</h2>
      <img @click="deleteSearch" class="search_sc" src="../assets/myImg/del@2x.png" alt />
      <div style="display:inline-block " v-for="item in searchList" :key="item.id" @click="searchLsBtn(item.keyword)">
        <span>{{item.keyword}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { search, getSearchList, delSearchLog } from "../api/search";
export default {
  name: "Search",
  data() {
    return {
      // 搜索关键字
      seaContent: "",
      // 用户头像
      userImg:'',
      // 搜索历史记录
      searchList: [],
      // 商品列表
      cateGoodsList: "",
      // 视频列表
      searchLists: "",
    };
  },
  methods: {
    // 回车事件 获取搜索信息
    onSubmit() {
      search(this.seaContent).then((res) => {
        if (res.code == 200) {
          this.searchLists = res.data.video;
          this.cateGoodsList = res.data.goods;
          console.log(res);
        } else {
          this.$toast({
            duration: "2000",
            message: res.msg,
          });
        }
      });
    },
	searchLsBtn(keyword){
		this.seaContent=keyword
	},
    // 搜索历史记录
    getSearchList() {
      let that = this;
      getSearchList().then((res) => {
        if (res.code == 200) {
          that.searchList = res.data.data;
        } else {
          that.searchList = "";
        }
      });
    },
    // 删除搜索记录
    deleteSearch() {
      delSearchLog().then((res) => {
        if (res.code == 200) {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
          this.getSearchList();
        }
      });
    },
    // 点击进入视频详情
    goVideoDetail(id) {
      this.$router.push({ name: "VideoDetail", query: { id } });
    },
  },
  mounted() {
    this.getSearchList();
    // 本地获取用户头像
    this.userImg = window.localStorage.getItem("userImg");
  },
  // 监听数据变化
  watch: {
    // 监听输入框值改变 如果为空 取消列表数据
    seaContent(type) {
      let arrType = [];
      arrType.push(type);
      if (arrType.length <= 1) {
        this.cateGoodsList = "";
        this.searchLists = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin: 0 0.4rem;
}
// 头部标题
.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}
// 头部搜索
.home_head {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  height: 0.826667rem;
  background: #fff;
  .inp_img {
    position: absolute;
    top: 0.586667rem;
    left: 0.24rem;
    width: 0.4rem;
    height: 0.4rem;
  }
  .head_inp {
    padding-left: 1.066667rem;
    width: 6.4rem;
    height: 100%;
    color: #2c2c2c;
    font-size: 0.32rem;
    background: #f6f6f6;
    border-radius: 0.373333rem;
  }
  .head_img {
    margin: 0.08rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
  }
}
// 热门搜索
.hot_search {
  position: relative;
  overflow: hidden;
  h2 {
    margin: 0.533333rem 0;
    font-size: 0.4rem;
    color: #333;
    font-weight: 700;
  }
  span {
    display: inline-block;
    margin: 0.133333rem;
    padding: 0 0.506667rem;
    height: 0.786667rem;
    line-height: 0.786667rem;
    text-align: center;
    background: #f6f6f6;
    border-radius: 0.4rem;
  }
  .search_sc {
    position: absolute;
    right: 0.266667rem;
    top: 0.426667rem;
    width: 0.426667rem;
    height: 0.426667rem;
  }
}
.isTakaryo {
  color: #647cfa;
}
.product_deta {
  .product_deta_item {
    display: flex;
    justify-content: space-between;
    margin-top: 0.266667rem;
    padding: 0 0.266667rem;
    height: 2.2rem;
    .deta_item_img {
      width: 3.48rem;
      height: 100%;
    }
    .deta_item_fr {
      margin-left: 0.266667rem;
      flex: 1;
      font-size: 0.293333rem;
      color: #6a6f72;
      .fr_h2 {
        margin: 0.266667rem 0;
        font-size: 0.346667rem;
        color: #282e36;
      }
      .fr_sp {
        width: 5.333333rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .fr_con {
        display: flex;
        justify-content: space-between;
        margin-top: 0.106667rem;
        height: 0.533333rem;
        .con_fl {
          color: #ff6801;
          .con_fl_img {
            margin-right: 0.133333rem;
            width: 0.293333rem;
            height: 0.293333rem;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.comm_list {
  padding: 0.4rem 0;
  .comm_item {
    margin-bottom: 0.4rem;
    position: relative;
    padding: 0 0.373333rem;
    // height: 4.453333rem;
    overflow: hidden;
    border: 0.013333rem solid #eee;
    border-radius: 0.2rem;
    .comm_tit {
      margin: 0.373333rem 0;
      margin-right: 1.333333rem;
      font-size: 0.453333rem;
      color: #333;
    }
    .comm_url {
      margin-bottom: 0.52rem;
      width: 6.4rem;
      height: 0.866667rem;
      font-size: 0.32rem;
    }
    .comm_bq {
      margin-top: 0.4rem;
      width: 5.12rem;
      height: 0.586667rem;
      line-height: 0.586667rem;
      background: #647cfa;
      color: #fff;
      font-size: 0.266667rem;
      border-radius: 0.293333rem;
      text-align: center;
    }
    .comm_deta {
      display: flex;
      justify-content: space-between;
      line-height: 1.226667rem;
    }
    // 复制按钮
    .dup_btn {
      position: absolute;
      top: 1.6rem;
      right: 0.586667rem;
      width: 1.066667rem;
      height: 0.586667rem;
      line-height: 0.586667rem;
      text-align: center;
      color: #fff;
      background: #1689ce;
      border-radius: 0.293333rem;
    }
  }
}
</style>